<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://www.w3.org/1999/XSL/Transform">

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/searchFill.css" type="text/css" media="screen" />
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>JPetStore Demo</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
</head>
<body>
    <header th:fragment="header">
        <div id="Logo">
            <div id="LogoContent">
                <a href="/catalog/view"><img src="../images/logo-topbar.gif" /></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">

                <a href="/cart/viewCart">	<img align="middle" name="img_cart" src="../images/cart.gif" /></a>
                <img align="middle" src="../images/separator.gif" />

                <a th:if="${session.account == null}" th:href="@{'/account/signon'}">Sign In</a>

                <a th:if="${session.account != null}" th:href="@{'/account/signout'}">Sign Out</a>

                <img th:if="${session.account != null}" align="middle" src="../images/separator.gif" />

                <a th:if="${session.account != null}" th:href="@{'/account/viewAccount'}">My Account</a>


                <img align="middle" src="../images/separator.gif" /><a href="help.html">?</a></div>
        </div>

        <div id="Search">
            <div id="SearchContent">
                <form action="/catalog/searchProduct" method="post">
                    <div id="SearchBox">
                        <input type="text" name="keyword" size="14" id="registerCity" autocomplete="off" />
                        <input type="submit" name="searchProducts" value="Search" id="registerCitySubmit" />
                    </div>
                </form>
            </div>
            <script src="../js/jquery-3.4.1.js"></script>
            <script>
                //-------注册地自动补全开始----------------------------------
                var registerCity=$("#registerCity");
                //创建自动完成的下拉列表，用于显示服务器返回的数据，插入在输入框后面，然后调整位置
                var autocomplete=$('<ul class="autocomplete"></ul>').hide().appendTo("#SearchBox");
                //清空下拉列表的内容并且隐藏下拉列表
                var clear= function () {
                    autocomplete.empty().hide();
                };
                //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
                registerCity.blur(function () {
                    setTimeout(clear,500);
                });
                //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的下键就会移动高亮的项目
                var selectedItem=null;
                var timeoutId=null;
                //设置下拉项的高亮背景
                var setSelectedItem= function (item) {
                    selectedItem=item;
                    //按上下键是循环显示的，小于0就设置成最大值，大于最大值就设置成0
                    if(selectedItem<0){
                        selectedItem=autocomplete.find("li").length-1;
                    }else if(selectedItem>autocomplete.find("li").length-1){
                        selectedItem=0;
                    }
                    //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
                    autocomplete.find("li").removeClass("highlight")
                        .eq(selectedItem).addClass("highlight");
                };
                var ajax_request= function () {

                    $.ajax({
                        url:"/catalog/fill",
                        contentType:"application/x-www-form-urlencoded:charset=UTF-8",
                        type:"get",
                        dataType:"json",
                        data:{"reg_city":$("#registerCity").val()},
                        success: function (data) {
                            var cityArr=data;
                            if(cityArr != null && cityArr != ""){
                                $.each(cityArr, function (index, term) {
                                    //创建li标签，添加到下拉列表中
                                    $('<li></li>').text(term).appendTo(autocomplete)
                                        .addClass("clickable")
                                        .hover(function () {
                                            $(this).siblings().removeClass("highlight");
                                            $(this).addClass("highlight");
                                            selectedItem=index;
                                        }, function () {
                                            $(this).removeClass("highlight");
                                            selectedItem=-1;
                                        }).click(function () {
                                        //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
                                        registerCity.val(term);
                                        //清空并隐藏下拉列表
                                        autocomplete.empty().hide();
                                    });
                                });//事件注册完毕
                                //设置下拉列表的位置，然后显示下拉列表
                                var ypos=registerCity.height()+4;
                                var xpos=registerCity.position().left;
                                autocomplete.css('width',registerCity.css('width'));
                                autocomplete.css({'position':'absolute','left':xpos+'px','top':ypos+'px',"z-index":"100"});
                                setSelectedItem(0);
                                //显示下拉列表
                                autocomplete.show();
                            }
                        }
                    });
                };
                //对输入框进行事件注册
                registerCity.keyup(function (e) {
                    //字母数字、退格、空格
                    if(e.keyCode > 40 || e.keyCode == 8 || e.keyCode ==32){
                        //首先删除下拉列表中的信息
                        autocomplete.empty().hide();
                        clearTimeout(timeoutId);
                        timeoutId=setTimeout(ajax_request,100);
                    }else if(e.keyCode==38){
                        //上
                        //selectedItem=-1代表鼠标离开
                        if(selectedItem==-1){
                            setSelectedItem(autocomplete.find("li").length-1);
                        }else{
                            //索引减1
                            setSelectedItem(selectedItem-1);
                        }
                        e.preventDefault();
                    }else if(e.keyCode==40){
                        //下
                        if(selectedItem==-1){
                            setSelectedItem(0);
                        }else{
                            setSelectedItem(selectedItem+1);
                        }
                        e.preventDefault();
                    }
                }).keypress(function (e) {
                    //enter回车键
                    if(e.keyCode==13){
                        //列表为空或者鼠标离开导致当前没有索引值
                        if(autocomplete.find("li").length==0||selectedItem==-1){
                            return;
                        }
                        registerCity.val(autocomplete.find("li").eq(selectedItem).text());
                        autocomplete.empty().hide();
                        e.preventDefault();
                    }
                }).keydown(function (e) {
                    //esc后退
                    if(e.keyCode==27){
                        autocomplete.empty().hide();
                        e.preventDefault();
                    }
                });
                //------注册地自动补全结束----------------------------
            </script>
        </div>

        <div id="QuickLinks">

            <a href="/catalog/viewCategory?categoryId=FISH">
                <img src="../images/sm_fish.gif" />
            </a>
            <img src="../images/separator.gif" />


            <a href="/catalog/viewCategory?categoryId=DOGS">
                <img src="../images/sm_dogs.gif" />
            </a>
            <img src="../images/separator.gif" />


            <a href="/catalog/viewCategory?categoryId=REPTILES">
                <img src="../images/sm_reptiles.gif" />
            </a>
            <img src="../images/separator.gif" />


            <a href="/catalog/viewCategory?categoryId=CATS">
                <img src="../images/sm_cats.gif" />
            </a>
            <img src="../images/separator.gif" />


            <a href="/catalog/viewCategory?categoryId=BIRDS">
                <img src="../images/sm_birds.gif" />
            </a>
            <img src="../images/separator.gif" />

        </div>
    </header>
</body>
</html>